<div id="site" class="main-content">
    <ng-include src="ctrl.templateUrl"></ng-include>

    <div class="col-md-8 col-md-push-2">
        <div class="widget-modal r">
            <div class="widget-modal-heading">
                Select Your Dashboard
            </div>
            <div class="widget-modal-body">
                <div class="text-center">
                    <div class="btn-group dashboard-type-list" role="group" aria-label="Basic example">
                        <button type="button"
                                class="btn btn-secondary"
                                ng-class="{'btn-info': ctrl.dashboardType == undefined}"
                                ng-click="ctrl.setType()">All dashboards</button>

                        <button type="button"
                                class="btn btn-secondary"
                                ng-repeat="item in ctrl.dashboardTypes"
                                ng-class="{'btn-info': ctrl.dashboardType == item.id}"
                                ng-click="ctrl.setType(item.id)">
                            <span class="fa {{item.icon}}" ng-if="item.icon"></span>

                            {{item.name}} dashboards
                        </button>
                    </div>
                </div>

                <div class="gap">
                    <input type="search" name="collectorItemId" class="form-control" placeholder="Type to find dashboard"
                           ng-model="ctrl.search"
                           uib-typeahead="item.description for item in ctrl.filterByTitle($viewValue)" typeahead-focus
                           typeahead-template-url="jobUrlTemplate.html"
                           typeahead-min-length="0"
                           typeahead-wait-ms="250"
                           autocomplete="off"
                           typeahead-no-results="noResults"
                           required>
                </div>

                <div class="row gap">
                    <div class="col-sm-4 col-sm-push-8 text-center">
                        <div>
                            <div class="create-dashboard-button btn btn-default btn-wide-2x" ng-click="ctrl.createDashboard()" ng-show="ctrl.showAuthentication">
                                <span class="fa fa-stack fa-lg">
                                    <span class="fa-circle-thin fa-stack-2x"></span>
                                    <span class="fa-plus fa-stack-1x"></span>
                                </span>
                                <br/>
                                Create a new<br/>dashboard
                            </div>
                        </div>

                    </div>
                    <div class="col-sm-8 col-sm-pull-4">
                        <div ng-show="ctrl.showAuthentication" id="myDashboardsSection">
                            <div class="gap">
                                    <div class="text-2x">My Dashboards <span class="label label-default"></span></div>

                            <div class="text-center" ng-hide="ctrl.mydash">Loading Your Dashboards...</div>
                            <div class="text-center" ng-show="ctrl.mydash && !mydashboards.length">
                                No results
                            </div>

                                    <ul class="list-animate list-group text-left">
                                        <li class="list-group-item"
                                            dir-paginate="myitem in mydashboards = (ctrl.mydash | filter:q | itemsPerPage: ctrl.getPageSize() | orderBy: 'name')"
                                            current-page="currentPageMyDash"
                                            total-items= ctrl.getTotalItemsMyDash()
                                            pagination-id="myDashboard">
                                        <span class="pull-right">


                                       <a href ng-click="ctrl.editDashboard(myitem,'lg')">
                                           <span class="fa fa-lg fa-cog text-success"></span>
                                       </a>

                                       <a href id="deleteDashboardButton" delete-confirm title="Are you sure you want to delete?" confirm-action="ctrl.deleteDashboard(myitem)">
                                            <span class="fa fa-lg fa-trash text-danger"></span>
                                       </a>
                                    </span>

                                            <a class="btn-block clickable" title="{{myitem.name}}" ng-click="ctrl.open(myitem.id)">
                                                <span class="fa fa-lg left-icon" ng-class="{'fa-cubes' : myitem.isProduct}"></span>
                                                <span   ng-class="{'text-danger' : myitem.showError}" class="word-overflow-wrap">
                                                    {{ myitem.name}}
                                                </span>
                                            </a>
                                        </li>
                                    </ul>

                                    <dir-pagination-controls
                                            max-size="8"
                                            boundary-links="true"
                                            direction-links="true"
                                            on-page-change="ctrl.pageChangeHandlerForMyDash(newPageNumber)"
                                            pagination-id="myDashboard">
                                    </dir-pagination-controls>
                            </div>
                        </div>

                        <div class="gap">
                            <div class="text-2x">All Dashboards</span></div>

                            <div class="text-center" ng-hide="ctrl.dashboards">Loading Dashboards...</div>
                            <div class="text-center" ng-show="ctrl.dashboards && !filteredDashboards.length">
                                No results
                            </div>

                            <ul class="list-animate list-group text-left">
                                <li  title="{{item.name}}"class="list-group-item clickable" ng-click="ctrl.open(item.id)"
                                     dir-paginate="item in filteredDashboards = (ctrl.dashboards | filter:q | itemsPerPage: ctrl.getPageSize() | orderBy: 'name')"
                                     current-page="currentPage"
                                     total-items= ctrl.getTotalItems()
                                     pagination-id="allDashboard">
                                    <span class="fa fa-lg left-icon" ng-class="{'fa-cubes' : item.isProduct}"></span>

                                    <span class="fa fa-angle-right list-group-item-right"></span>

                                <span class="word-overflow-wrap">{{item.name}}</span>
                                </li>
                            </ul>
                            <dir-pagination-controls
                                    max-size="8"
                                    boundary-links="true"
                                    direction-links="true"
                                    on-page-change="ctrl.pageChangeHandler(newPageNumber)"
                                    pagination-id="allDashboard">
                            </dir-pagination-controls >

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/ng-template" id="jobUrlTemplate.html">
    <a title={{match.model.options.instanceUrl}}>
        <span ng-bind-html="match.label | uibTypeaheadHighlight:query"/>
    </a>
</script>